<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-29 16:56:47
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-29 19:31:54
 * @FilePath: \fe_user_pc\src\views\shotstack\MuseMixedCut\MixedCutPreview\components\saveVideoDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 选择保存位置弹窗
-->
<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
// 等待弹窗
import awaitDialog from '@/views/shotstack/components/dialogComponent/awaitDialog.vue'

import request from "@/common/utils/request";

import { ref, defineProps } from "vue";
import { useRouter, useRoute } from "vue-router";

const props = defineProps({
    data: {
        type: Object,
        required: true,
        default: () => ({ options: '', id: "" }),
    },
    saveData: {
        type: Object,
        required: true,
    },
});

const dialog = ref(null);
const route = useRoute();
const router = useRouter()
//页面初始化
const FileName = ref("")
const showModal = () => {
    FileName.value = props.data.options
    dialog.value.showModal();
};

const closeModal = () => {
    dialog.value.closeModal();
}

// 去重或不去重
const radioVal = ref(1);
const changeradio = (val) => {
    radioVal.value = val
}

// 文件夹保存形式
const saveType = ref(1);

// 点击确定
const awaitModel = ref(null)

// 生成高质量视频
const queryData = ref({
    id: "",
    shotstack_response_num: "",
    shotstack_response_ids: [],
    folder_id: ""
})
const submit = () => {
    queryData.value.folder_id = props.data.id
    queryData.value.id = route.query.qid
    queryData.value.shotstack_response_num = props.saveData.checked_num
    queryData.value.shotstack_response_ids = props.saveData.checkedIds
    request
        .put("/work_ai", `/user/shotstack/preview/high`, queryData.value)
        // .put("/work_ai", `/user/shotstack/preview/high?id=${queryData.value.id}&shotstack_response_num=${queryData.value.shotstack_response_num}&shotstack_response_ids=${queryData.value.shotstack_response_ids}&folder_id=${queryData.value.folder_id}`)
        .then((res) => {
            if (res.code == 10011) {
                // 请求失败
                message.warn(res.msg)
                setTimeout(() => {
                    backClick();
                }, 3000);

            } else {
                awaitModel.value && awaitModel.value.showModal()
                closeModal()
            }

        })

}

const cancel = () => {
    dialog.value.closeModal();
}


defineExpose({
    showModal,
    closeModal,
    cancel
});
</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="'660px'">
            <template #title>
                <div class="title_box">
                    <h2>保存到「我的作品」</h2>
                </div>

            </template>
            <template #content>
                <div class="content">
                    <!-- 视频 去重 -->
                    <div class="content_item">
                        <!-- 头部提示 视频生成模式 接口不支持 暂时屏蔽-->
                        <!-- <div class="base_title_box">
                            <span class="base_title">视频生成模式</span>
                            <p class="tips">「去重」是指算法剔除内容重复的视频，有助于提升内容过审概率
                                <span class="tips_link">如何增加去重后视频数量？</span>
                            </p>
                        </div> -->
                        <!-- 选择是否去重 -->
                        <!-- <div class="select_wrap">
                            <div class="select_item" @click="changeradio(1)"
                                :class="{ 'active_select': radioVal == 1 }">
                                <div class="radio_box">
                                    <div class="radio"></div>
                                    <span class="select_title">去重</span>
                                </div>
                                <p class="select_desc">
                                    预计视频生成量
                                    <span class="select_desc_estimate">最高约</span>
                                    <span class="select_desc_num">{{ 1 }}</span>
                                </p>
                            </div>
                            <div class="select_item " :class="{ 'active_select': radioVal == 2 }"
                                @click="changeradio(2)">
                                <div class="radio_box">
                                    <div class="radio"></div>
                                    <span class="select_title">不去重</span>
                                </div>
                                <p class="select_desc">
                                    预计视频生成量
                                    <span class="select_desc_num">{{ 1 }}</span>
                                </p>
                            </div>
                        </div> -->
                    </div>

                    <!-- 视频保存形式 -->
                    <div class="content_item" style="margin-top: 20px;">
                        <!-- 头部提示 -->
                        <div class="base_title_box">
                            <span class="base_title">视频保存形式</span>
                            <p class="tips">混剪视频将保存至【我的空间/我的作品】
                            </p>
                        </div>
                        <!-- 选择是否去重 -->
                        <div class="select_wrap">

                            <div class="select_Box">
                                <a-radio-group v-model:value="saveType">
                                    <a-radio :value="1">以文件夹保存</a-radio>
                                    <a-popover placement="top" trigger="hover" :getPopupContainer="(trigger) => trigger"
                                        :content="'正在开发中'">
                                        <a-radio disabled :value="2">单文件保存</a-radio>
                                    </a-popover>
                                </a-radio-group>
                                <a-input v-model:value="FileName" placeholder="" disabled style="margin-top: 20px;" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <div class="bottom">
                    <a-button class="btn" key="back" @click="cancel" style="margin-right: 10px;">取消</a-button>
                    <a-button class="btn" key="submit" type="primary" :loading="loading" :disabled="disableSubmit"
                        @click="submit">确定</a-button>
                </div>
            </template>
        </baseModel>
        <awaitDialog ref="awaitModel"></awaitDialog>
    </div>
</template>



<style lang="less" scoped>
@fontColor: #1c1f23;

.title_box {
    h2 {
        color: @fontColor;
        font-size: 18px;
        font-weight: 600;
        margin: 0;

    }
}

.content {
    .content_item {

        // 选择是否去重
        .select_wrap {
            display: flex;
            width: 100%;
            gap: 20px;

            .select_Box {
                width: 100%;
                display: flex;
                flex-direction: column;
            }

            .select_item {
                width: 50%;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                padding: 12px 16px;
                border: 1px solid #e5e8ef;
                border-radius: 8px;

                .select_desc {
                    margin: 0;
                    color: #1c1f2399;
                    font-size: 12px;

                    .select_desc_estimate {
                        color: @fontColor;
                    }

                    .select_desc_num {
                        color: @fontColor;
                        font-weight: 600;
                        font-size: 18px
                    }
                }

                .radio_box {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;

                    .radio {
                        height: 16px;
                        width: 16px;
                        border-radius: 16px;
                        overflow: hidden;
                        border: 1px solid #dddddd;
                        margin-right: 5px;

                    }
                }
            }

            .active_select {
                border-color: #1664ff;
                background: #eaf5ff;

                &>.radio_box>.radio {
                    border: 5px solid #0064fa;
                }
            }
        }


        .base_title_box {
            .base_title {
                color: @fontColor;
                font-size: 16px;
                position: relative;
                padding-left: 5px;

                &::after {
                    content: "";
                    height: 70%;
                    width: 2px;
                    background: #1664ff;
                    position: absolute;
                    left: 0;
                    top: 20%;
                }
            }

            .tips {
                color: #1c1f2399;
                font-size: 12px;
                margin-top: 10px;

                .tips_link {
                    color: #0064fa;
                }
            }
        }
    }

}

.bottom {}
</style>